<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
		<title></title>
	</head>
	<body>
		<!-- 不同设备完美视口大小不同,同样的像素在不同设备下意义不同 -->
		<!-- 在移动端开发时，不能用px布局 -->
		<div class="box1"></div>
		<!-- 假设设计图宽度 750px 1125px  创建一个48px * 35px元素 -->
		<!-- 100vw = 750px 0.1333333xw =1px 6.4vw=48px 4.667vw = 35px-->
		<!-- 网页中字体大小最小是12px，不能设hi比12px还小的字体 -->
		<!-- 1rem = 1html字体大小 5.333333xw = 40px 可设置全局字体大小1rem = 5.333333xw，使用rem作为单位-->
	</body>
</html>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	/* vw(viewport width)表示视口的宽度 1vw=1%视口宽度 */
	.box1{
		width: 100vw;
		height: 100vw;
		background-color: #0000FF;
	}
</style>